import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

import { fileURLToPath, URL } from 'node:url'

// 自动导入插件
import AutoImport from 'unplugin-auto-import/vite' // 自动导入API函数
import Components from 'unplugin-vue-components/vite' // 自动导入Vue组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // Element Plus组件解析器

// 自动导入 Element Plus 组件的样式
import ElementPlus from 'unplugin-element-plus/vite'

// 支持 tsconfig 路径别名
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  // const isDev = mode === 'development'

  // 打印当前环境信息（调试用）
  // console.log(`运行模式: ${mode}`)

  return {
    base: env.VITE_LOCAL_BASE_URL, // 默认值就是 '/'，加上的原因是预留和防止遗忘。
    // 如果配置了其他值，比如 '/my-app/'，打包后：
    // index.html → https://example.com/my-app/
    // assets/index.xxxx.js → https://example.com/my-app/assets/index.xxxx.js
    // index.html <script type="module" src="/my-app/assets/index.xxxx.js"></script>
    // router
    // createRouter({
    //   history: createWebHistory(import.meta.env.BASE_URL), // 自动使用 base
    // })

    resolve: {
      alias: {
        '@': fileURLToPath(
          new URL('./src', import.meta.url),
        ),
      },
    },

    css: {
      // 全局注入 scss 变量
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "@/styles/element-theme-xiaotuxian.scss" as *;
            @use "@/styles/vars.scss" as *;
          `,
        },
      },
    },

    // server 配置仅 dev 环境生效
    // vite build 会忽略 server 字段
    server: {
      host: true, // 默认值 localhost，为 true 即 0.0.0.0 时才会允许局域网访问
    },

    plugins: [
      vue(),
      tsconfigPaths(),
      // 自动导入API函数（如Vue组合式API）
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      // 自动导入Vue组件（包括Element Plus组件）
      Components({
        dts: false,
        dirs: ['src/**/components'],
        resolvers: [
          ElementPlusResolver({ importStyle: 'sass' }),
        ], // 样式解析默认是 css 文件，这里要改为 sass
      }),
      // 自动导入 ep 样式
      ElementPlus({
        useSource: true,
      }),
    ],
  }
})
